<template>
    <div class="activity-container">
        <h2 class="page-title">社区活动</h2>
        <div class="activity-tabs">
            <el-tabs tab-position="left" class="custom-tabs" style="height: 100%;">
                <el-tab-pane label="全部">
                    <template #label>
                        <div class="tab-label">
                            <el-icon><Star /></el-icon>
                            <span>全部活动</span>
                        </div>
                    </template>
                    <div class="activity-grid">
                        <el-empty v-if="tableData.length === 0" description="暂无活动" />
                        <el-card 
                            v-for="(activity, index) in tableData" 
                            :key="index"
                            class="activity-card" 
                            shadow="hover"
                            @click="toDetail(activity.id, activity.image)"
                        >
                            <div class="card-image-wrapper">
                                <el-image :src="activity.image" fit="cover" class="card-image"></el-image>
                                <div class="activity-status" :class="getStatusClass(activity.activityStatus)">
                                    {{ getStatusText(activity.activityStatus) }}
                                </div>
                            </div>
                            <div class="card-content">
                                <h3 class="activity-title">{{ activity.activityName }}</h3>
                                <div class="activity-meta">
                                    <div class="activity-time">
                                        <el-icon><Calendar /></el-icon>
                                        <span>{{ activity.activityDate }}</span>
                                    </div>
                                    <div class="activity-location" v-if="activity.location">
                                        <el-icon><Location /></el-icon>
                                        <span>{{ activity.location }}</span>
                                    </div>
                                    <div class="activity-enrollment">
                                        <el-icon><User /></el-icon>
                                        <span>已报名: {{ activity.currentParticipants || 0 }}/{{ activity.maxParticipants || '不限' }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>

                <el-tab-pane 
                    v-for="(item, index) in state1Type" 
                    :key="index" 
                    :label="item.type"
                    :name="item.id.toString()"
                >
                    <template #label>
                        <div class="tab-label">
                            <el-icon>
                                <component :is="getIcon(item.id % 5)" />
                            </el-icon>
                            <span>{{ item.type }}</span>
                        </div>
                    </template>
                    <div class="activity-grid">
                        <el-empty v-if="!categorizedActivities[item.id] || categorizedActivities[item.id].length === 0" description="暂无活动" />
                        <el-card 
                            v-for="activity in categorizedActivities[item.id]" 
                            :key="activity.id"
                            class="activity-card" 
                            shadow="hover"
                            @click="toDetail(activity.id, activity.image)"
                        >
                            <div class="card-image-wrapper">
                                <el-image :src="activity.image" fit="cover" class="card-image"></el-image>
                                <div class="activity-status" :class="getStatusClass(activity.activityStatus)">
                                    {{ getStatusText(activity.activityStatus) }}
                                </div>
                            </div>
                            <div class="card-content">
                                <h3 class="activity-title">{{ activity.activityName }}</h3>
                                <div class="activity-meta">
                                    <div class="activity-time">
                                        <el-icon><Calendar /></el-icon>
                                        <span>{{ activity.activityDate }}</span>
                                    </div>
                                    <div class="activity-location" v-if="activity.location">
                                        <el-icon><Location /></el-icon>
                                        <span>{{ activity.location }}</span>
                                    </div>
                                    <div class="activity-enrollment">
                                        <el-icon><User /></el-icon>
                                        <span>已报名: {{ activity.currentParticipants || 0 }}/{{ activity.maxParticipants || '不限' }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="pagination-wrapper">
            <el-config-provider :locale="locale">
                <el-pagination 
                    v-model:current-page="currentPage" 
                    :page-size="pageSize" 
                    v-model:total="total"
                    :pager-count="7" 
                    background 
                    layout="prev, pager, next, jumper, total"
                    @current-change="handleCurrentChange" 
                />
            </el-config-provider>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router'
import { Star, GoldMedal, VideoCameraFilled, Guide, Connection, Operation, Calendar, Location, User } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
//语言配置
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
//Store
import { storeToRefs } from "pinia"
import { useActivityStore } from "../../../stores/activity.js"
import { useActivitytypeStore } from "../../../stores/activitytype.js";
const activityStore = useActivityStore()
const activityTypeStore = useActivitytypeStore()
const { tableData, total } = storeToRefs(activityStore)
const { state1Type, categorizedActivities } = storeToRefs(activityTypeStore)
activityTypeStore.loadByState()
//分页控制
const pageSize = ref(6)
const currentPage = ref(1)
const handleCurrentChange = () => {
    activityStore.currentPage = currentPage.value
    activityStore.pageSize = pageSize.value
    console.log(activityStore.currentPage);
    console.log(activityStore.pageSize);
    activityStore.selectAllByPage()
}
handleCurrentChange()

onMounted(async () => {
    await activityTypeStore.loadByState(); // 确保在活动类型加载完成后加载活动
});

const router = useRouter()
const toDetail = (id, image) => {
    activityStore.activityDetail.id = id;
    activityStore.activityDetail.image = image;
    router.push({
        path: '/front/activity/ActivityDetailView',
        query: {
            Id: id,
        }
    });
}

/**
 * 根据不同字符串，返回不同Icon组件
 * @param {string } icon
 */
const getIcon = (id) => {
    switch (id) {
        case 1:
            return GoldMedal
        case 2:
            return VideoCameraFilled
        case 3:
            return Guide
        case 4:
            return Connection
        case 0:
            return Operation
    }
}

/**
 * 获取活动状态的显示文本
 * @param {number} status - 活动状态码
 * @returns {string} - 状态文本
 */
const getStatusText = (status) => {
    switch(status) {
        case 0: return '未开始'
        case 1: return '报名中'
        case 2: return '进行中'
        case 3: return '已结束'
        default: return '未知状态'
    }
}

/**
 * 获取活动状态的CSS类名
 * @param {number} status - 活动状态码
 * @returns {string} - CSS类名
 */
const getStatusClass = (status) => {
    switch(status) {
        case 0: return 'status-pending'
        case 1: return 'status-enrolling'
        case 2: return 'status-ongoing'
        case 3: return 'status-ended'
        default: return ''
    }
}
</script>

<style scoped>
.activity-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
}

.page-title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 24px;
    position: relative;
    padding-left: 16px;
}

.page-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: #409EFF;
    border-radius: 2px;
}

.activity-tabs {
    flex: 1;
    min-height: 600px;
    margin-bottom: 20px;
}

.custom-tabs :deep(.el-tabs__header) {
    margin-right: 30px;
}

.custom-tabs :deep(.el-tabs__nav) {
    min-width: 160px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f7fa;
    border: none;
}

.custom-tabs :deep(.el-tabs__item) {
    height: 60px;
    line-height: 60px;
    color: #606266;
    font-size: 15px;
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.custom-tabs :deep(.el-tabs__item.is-active) {
    color: #409EFF;
    background-color: #ecf5ff;
    border-left: 3px solid #409EFF;
}

.custom-tabs :deep(.el-tabs__content) {
    padding: 0;
}

.tab-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 10px 0;
}

.activity-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    height: 100%;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.card-image-wrapper {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
}

.activity-card:hover .card-image {
    transform: scale(1.05);
}

.activity-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
}

.status-pending {
    background-color: #909399;
}

.status-enrolling {
    background-color: #67C23A;
}

.status-ongoing {
    background-color: #409EFF;
}

.status-ended {
    background-color: #F56C6C;
}

.card-content {
    padding: 15px;
}

.activity-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 45px;
}

.activity-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #909399;
}

.activity-time, .activity-location, .activity-enrollment {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .activity-container {
        width: 95%;
    }
    
    .activity-grid {
        grid-template-columns: 1fr;
    }
    
    .custom-tabs :deep(.el-tabs__nav) {
        min-width: 120px;
    }
    
    .custom-tabs :deep(.el-tabs__item) {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
    }
}
</style>